<template>
  <el-dialog :title="t('oper.7')" style="width: 600px" align-center v-model="dialogVisible" @close="closeDialog">
    <!-- 表单 -->
    <el-form ref="formRef"  :model="formData" :rules="rules" label-width="auto" status-icon>
      <el-form-item :label="t('label.120')" prop="type" >
        <el-select v-model="formData.type" :placeholder="t('hint.137')">
          <el-option :label="`+ ${t('status.manual_deposit')}`" value="manual_deposit" />
          <el-option :label="`+ ${t('status.manual_credit')}`" value="manual_credit" />
          <el-option :label="`+ ${t('status.promotion_bonus')}`" value="promotion_bonus" />
          <el-option
            :label="`- ${t('status.mistaken_withdrawal')}`"
            value="mistaken_withdrawal"
          />
          <el-option
            :label="`- ${t('status.admin_deduction')}`"
            value="admin_deduction"
          />
          <el-option :label="`- ${t('status.deposit_reversal')}`" value="deposit_reversal" />
        </el-select>
      </el-form-item>
      <template v-for="item in fromList">
        <el-form-item :label="$t(item.label)" :prop="item.prop">
          <div class="flex flex-col gap10px">
            <template v-if="item.type === 'select'">
              <el-select v-model="formData[item.prop]" class="w-490px" >
                  <template v-for="option in item.options" :key="option.value">
                    <el-option :label="option.label" :value="option.value" />
                  </template>
                </el-select>
            </template>
            <template v-else>
              <el-input :type="item.type" v-model="formData[item.prop]" class="w-490px" />
            </template>
            <el-text class="leading-tight w-full" line-clamp="10" >{{$t(item.hint)}}</el-text>
          </div>
        </el-form-item>
      </template>
    </el-form>
    <!-- 弹窗底部操作按钮 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm" :loading="loading">
          {{$t('btn.1')}}
        </el-button>
        <el-button @click="closeDialog">
          {{$t('btn.8')}}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import Api from '@/api/finance/transfer'
const { t } = useI18n();
const dialogVisible = ref(false);
const loading = ref(false)
const fromList = [
  { label: t("form.45"), prop: "amount", hint: "",type: "number" },
  { label: t("form.46"), prop: "note", hint: "",type: "textarea" },
]
const rules = {
  type: [{ required: true, message: t('hint.69'), trigger: 'blur' }],
  amount: [{ required: true, message: t('hint.70'), trigger: 'blur' }],
  note: [{ required: true, message: t('hint.71'), trigger: 'blur' }],
}
const formData = ref({
  user_id: "",
  amount: '',
  type: '',
  note: ''
})
const formRef = ref()

const emit = defineEmits(['submitClick']);
const submitForm = () => {
  formRef.value.validate((valid, fields) => {
    if (valid) {
      loading.value = true
      Api.add(formData.value).then(s => {
        ElMessage.success(t('hint.29'))
        emit("submitClick")
        closeDialog()
      }).finally(() => {
        loading.value = false
      })
    }
  })
}
// 关闭弹窗
function closeDialog () {
  loading.value = false
  dialogVisible.value = false;
  formRef.value?.resetFields();
  formRef.value?.clearValidate();
}
const setModal = (id) => {
  formData.value.user_id = id
  formData.value.type = ''
  dialogVisible.value = true
}
defineExpose({ setModal });
</script>